<!--shouhuofang配送详情-->
<template>
<div>
  <div class="prog-wrap">业务单号：{{data.BbMain.BBillNo}}</div> 
  <div class="map-wrap">
    <div id="allmap" style="height: 100%;"></div>
  </div>
  
  <div class="pro-map-wrap">
    <div class="displayflex pro-map-head">
      <dl class="flex1">
        <dt>到达:{{PoMain.ArrivalCity | city}}</dt> 
        <dd>{{PoMain.ArrivalDistrict | district}} {{PoMain.ArrivalAddress}}</dd> 
        <dd class="PoDate">{{PoMain.ArrivalArrivedDate | GetDate}}</dd>
      </dl> 
      <dl >
        <dt>起点:{{PoMain.DepartureCity | city}}</dt> 
        <dd>{{PoMain.DepartureDistrict | district}} {{PoMain.DepartureAddress}}</dd> 
        <dd class="PoDate">{{PoMain.DepartureDate | GetDate}}</dd>
      </dl>
    </div> 
    <div class="pro-map-body">
      <div class="pm-logis displayflex">
        <span class="tag">物</span> 
        <div class="flex1">
          <p>{{PoMain.DeliverName}}</p> 
          <em >{{PoMain.TPLPoNo}}</em>
        </div>
      </div> 
      <div class="pm-driver displayflex">
        <i class="llse icon llse-driver"></i> 
        <span>{{Vehicle.Driver1Name}}</span> 
        <em class="flex1">{{Vehicle.Driver1Tel}}</em> 
        <span>{{Vehicle.Driver1Name}}<a :href="`tel://${Vehicle.Driver1Tel}`" class="llse llse-phone org"></a></span>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "progresss",
  data() {
    return {
      tabNo: 1,
      data: {
        BbMain: {},
        PoMain: {},
        Vehicle: {},
      },
      time: "",
      progressNode: [],
      PoMain: {},
      Vehicle: {},
      filter: this.$options.filters,
      HandoverList:[],
      map: null,
      points: [],
      addressStart: "",
      addressEnd: "",

      semiTraceData: [],
    };
  },
  created() {
    this.getdata();
  },
  computed: {
    userinfo() {
      return localStorage.getItem("userinfo") === null
        ? null
        : JSON.parse(localStorage.getItem("userinfo"));
    },
    Guid() {
      return this.$route.query.Guid ? this.$route.query.Guid : null;
    },
  },
  methods:{
    getdata(){
      let self = this;
      let query = {
        Guid: this.Guid,
        RequestType: 'Tracing',
      };
      this.Ajax.post("GetOrderDetail", query).then(res => {
        this.data = res.Data;
        if (this.data.PoMain) this.PoMain = this.data.PoMain;
        if (this.data.Vehicle) this.Vehicle = this.data.Vehicle;
        if(this.HandoverList) this.HandoverList =this.data.HandoverList;
        if (this.PoMain) {
          this.addressStart = `${this.filter.province(
            this.PoMain.DepartureProvince
          )}${this.filter.city(
            this.PoMain.DepartureCity
          )}${this.filter.district(this.PoMain.DepartureDistrict)}${
            this.PoMain.DepartureAddress
          }`;
          this.addressEnd = `${this.filter.province(
            this.PoMain.ArrivalProvince
          )}${this.filter.city(
            this.PoMain.ArrivalCity
          )}${this.filter.district(this.PoMain.ArrivalDistrict)}${
            this.PoMain.ArrivalAddress
          }`;
        }

        if (this.data.GpsList && this.data.GpsList.length > 0) {
          this.data.GpsList.forEach(x => {
            let item = JSON.parse(x.DrivePositionGIS);
            this.points.push(new BMap.Point(item.lng, item.lat));
          });
        } else {
          var myGeo = new BMap.Geocoder();
          //console.log(this.addressStart);
          myGeo.getPoint(
            this.addressStart,
            function(point) {
              console.log(point);
              self.points.push(new BMap.Point(point.lng,point.lat));
            },
            this.addressStart
          );
        }
        
        this.$nextTick(() => {
          this.LoadMap();
        });
      })
      .catch((e) => {
        console.log(e);
        this.Toast('发生错误，请刷新重试')
      })
    },
    LoadMap() {
      let self = this,
        mapStyle = {
          styleJson: [
            {
              featureType: "water",
              elementType: "all",
              stylers: {
                color: "#62b9c0"
              }
            },
            {
              featureType: "land",
              elementType: "all",
              stylers: {
                color: "#f3f3f3"
              }
            },
            {
              featureType: "railway",
              elementType: "all",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "highway",
              elementType: "all",
              stylers: {
                color: "#dae9e6"
              }
            },
            {
              featureType: "highway",
              elementType: "labels",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "arterial",
              elementType: "geometry",
              stylers: {
                color: "#fefefe"
              }
            },
            {
              featureType: "arterial",
              elementType: "geometry.fill",
              stylers: {
                color: "#fefefe"
              }
            },
            {
              featureType: "poi",
              elementType: "all",
              stylers: {
                visibility: "on"
              }
            },
            {
              featureType: "green",
              elementType: "all",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "subway",
              elementType: "all",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "manmade",
              elementType: "all",
              stylers: {
                color: "#d1d1d1"
              }
            },
            {
              featureType: "local",
              elementType: "all",
              stylers: {
                color: "#d1d1d1"
              }
            },
            {
              featureType: "arterial",
              elementType: "labels",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "boundary",
              elementType: "all",
              stylers: {
                color: "#8eaeb1"
              }
            },
            {
              featureType: "building",
              elementType: "all",
              stylers: {
                color: "#d1d1d1"
              }
            },
            {
              featureType: "label",
              elementType: "labels.text.fill",
              stylers: {
                color: "#666666"
              }
            },
            {
              featureType: "district",
              elementType: "labels.text.fill",
              stylers: {
                color: "#444"
              }
            },
            {
              featureType: "district",
              elementType: "labels.text.stroke",
              stylers: {
                color: "#EFEFEF"
              }
            }
          ]
        };

      let top_right_navigation = new BMap.NavigationControl({
          anchor: BMAP_ANCHOR_TOP_RIGHT,
          type: BMAP_NAVIGATION_CONTROL_SMALL
        }), //右上角，仅包含平移和缩放按钮
        GeoCoder = new BMap.Geocoder();

      this.map = new BMap.Map("allmap");
      this.map.setMapStyle(mapStyle);
      this.map.addControl(top_right_navigation);
      this.map.enableScrollWheelZoom();

      //设定起止点
      let fc = this.$options.filters["city"],
        myGeo = new BMap.Geocoder(),
        AddressPair = [this.addressStart, this.addressEnd],
        IcoPair = ["/static/images/start.png", "/static/images/end.png"],
        AddressTxtPair = [
          fc(this.PoMain.DepartureCity),
          fc(this.PoMain.ArrivalCity)
        ],
        PointPair = [];

      runAsync().then(x => {
        if (x === true) {
          if (this.addressstart !== "" && this.addressend !== "") {
            this.setZoom(PointPair);
            this.setRoute(PointPair);
          }
          let polyline = drawRoute();
          this.map.addOverlay(self.car);
          this.map.addOverlay(polyline); //增加折线
        } else {
          this.Toast({
            message: "起始地址没有解析到结果，请刷新重试"
          });
        }
      });

      function drawRoute() {
        let driving = new BMap.DrivingRoute(self.map),
          polylinelist = [];

        self.points.forEach(element => {
          polylinelist.push(new BMap.Point(element.lng, element.lat));
        });
        let polyline = new BMap.Polyline(polylinelist, {
          strokeColor: "black",
          strokeWeight: 5,
          strokeOpacity: 1
        });
        
        if(self.points.length > 0) {
          self.car = new BMap.Marker(self.points[self.points.length - 1], {
            icon: new BMap.Icon("/static/images/car.png", new BMap.Size(52, 32), {
              anchor: new BMap.Size(27, 13)
            })
          });
        }

        return polyline;
      }

      function runAsync() {
        let promise = new Promise((resolve, reject) => {
          AddressPair.forEach((x, i) => {
            myGeo.getPoint(
              x,
              function(point) {
                if (point) {
                  PointPair.push(point);
                  let Mark = new BMap.Marker(point, {
                    icon: new BMap.Icon(IcoPair[i], new BMap.Size(36, 36), {
                      anchor: new BMap.Size(18, 36)
                    })
                  });
                  self.map.addOverlay(Mark);
                  if (PointPair.length === AddressPair.length) {
                    resolve(true);
                  }
                } else {
                  reject(false);
                }
              },
              AddressTxtPair[i]
            );
          });
        });
        return promise;
      }
    },

    // 根据点的数组自动调整缩放级别
    setZoom(bPoints) {
      let view = this.map.getViewport(eval(bPoints)),
        mapZoom = view.zoom,
        centerPoint = view.center;
      this.map.centerAndZoom(centerPoint, mapZoom);
    },

    setRoute(bPoints) {
      let driving = new BMap.DrivingRoute(this.map, {
        renderOptions: {
          map: this.map,
          autoViewport: true
        },
        onPolylinesSet: routes => {
          let searchRoute = routes[0].getPolyline(); //导航路线
          searchRoute.setStrokeColor("#62b9c0");
          searchRoute.setStrokeOpacity(1);
          this.map.addOverlay(searchRoute);
        },
        onMarkersSet: routes => {
          this.map.removeOverlay(routes[0].marker); //删除起点
          this.map.removeOverlay(routes[1].marker); //删除终点
        }
      });
      driving.search(bPoints[0], bPoints[1]);
    },
  }
}

</script>